import React, { FC, memo } from 'react';
import styles from './groupHeader.module.less';
import commonStyle from '@/styles/pageCommon.module.less';
import { Radio } from 'antd';
import { history } from 'umi';

interface iGroupHeader {
  headerActive: string;
  title: string;
  mid: number;
}
const GroupHeader: FC<iGroupHeader> = (props) => {
  const { headerActive, title, mid } = props;
  const goPage = (e: any) => {
    history.push(`/group/${mid}/${e.target.value}`);
  };
  return (
    <div className={`flex ai-center ${styles.monitorHeader}`}>
      <div className={commonStyle.headerTitle}>{title}</div>

      <Radio.Group
        onChange={goPage}
        size="large"
        value={headerActive}
        optionType="button"
        buttonStyle="solid"
        style={{ marginBottom: 0 }}
      >
        <Radio.Button style={{ fontSize: '14px' }} value="main">
          概况
        </Radio.Button>
        <Radio.Button style={{ fontSize: '14px' }} value="grouping">
          分组
        </Radio.Button>
        <Radio.Button style={{ fontSize: '14px' }} value="miner">
          矿机
        </Radio.Button>
        <Radio.Button style={{ fontSize: '14px' }} value="card">
          显卡
        </Radio.Button>
      </Radio.Group>
    </div>
  );
};
export default memo(GroupHeader);
